<template>
  <div class="page3">
    <el-row>
      <el-col :span="5">
        <el-form style="height: 80px" :inline="true" ref="form">
          <el-form-item class="eli" label="股票代码:">
            <el-input v-model="code"></el-input>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="14"
        ><div class="tip">
          注意: 需要调试模型参数，以达到最佳预测效果。
        </div></el-col
      >
      <!-- <div class="line1"> <el-input v-model='code'></el-input></div> -->
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form style="height: 80px" :inline="true" ref="form">
          <el-form-item label="模型时间窗口look_back:">
            <el-input v-model="look_back"></el-input>
          </el-form-item>
          <el-form-item label="测试集数据占比test_ratio:">
            <el-input v-model="test_ratio"></el-input>
          </el-form-item>
          <el-form-item label="训练轮次epochs:">
            <el-input v-model="epochs"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <!-- <div class="line1"> <el-input v-model='code'></el-input></div> -->
    </el-row>
    <el-row class="content3">
      <div class="echarts"></div>
    </el-row>
  </div>
</template>

<script>
import { predictPrice } from "@/api/page2Api";

export default {
  name: "page3",
  components: {},
  data() {
    return {
      code: "000001",
      look_back: 1,
      test_ratio: 0.2,
      epochs: 3,
    };
  },
  mounted() {
    this.search()
  },
  methods: {
    search() {
      let params = {
        code: this.code,
        look_back: this.look_back,
        test_ratio: this.test_ratio,
        epochs: this.epochs,
        xData: [],
        yData: [],
      };
      predictPrice(params).then((res) => {
        this.xData = res.all_time;
        this.yData = res.all_data;
        console.log(this.xData, this.yData);
        this.rData();
      });
    },
    rData() {
      let chart = document.querySelector(".echarts");
      let myChart = this.$echarts(chart);
      let option = {
        xAxis: {
          type: "category",
          splitLine: { show: false },
          data: this.xData,
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            animation: false,
          },
        },
        yAxis: {
          type: "value",
          splitLine: { show: false },
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
        },
        series: [
          {
            data: this.yData,
            type: "line",
          },
        ],
      };
      myChart.clear();
      myChart.resize();
      myChart.setOption(option);
    },
  },
  beforeDestroy() {},
};
</script>

<style lang="less" scoped>
.content3 {
  height: 75%;
  width: 100%;
  .echarts {
    height: 100%;
    width: 100%;
  }
}
.line1 {
  width: 300px;
}
.tip {
  height: 80px;
  line-height: 80px;
  font-size: 17px;
  color: #fff;
  font-weight: 500;

  // text-align: center;
}
/deep/.el-form .el-form-item .el-form-item__label {
  color: #fff;
}
.eli {
  transform: translateY(50%);
}
.page3 {
  height: 100%;
  width: 100%;
  padding: 14px 20px 20px;
  background: #000;
  overflow: hidden;
  .ivu-col {
    height: 100%;
    float: left;
  }

  .left,
  .right1-1,
  .center-bottom {
    height: 100%;
    border: 1px solid #0d2451;
    position: relative;
    background: #151456;
    .topchart {
      height: 100%;
      width: 100%;
      // display: flex;
      .chart-50 {
        height: 100%;
        width: 100%;
        float: left;
      }
    }
    .chart-68 {
      width: 100%;
      height: 100%;
      float: left;
    }

    .chart-33 {
      width: 100%;
      height: 100%;
      float: left;
    }
    #left_5 {
      height: 100%;
      width: 45%;
      float: left;
    }

    #left_6 {
      height: 100%;
      width: 55%;
      float: left;
    }

    .circular {
      height: 100%;

      .canvas {
        height: 100%;
        width: 30%;
        float: left;

        .subtitle {
          font-size: 12px;
          font-weight: bold;
          color: #fff;
          height: 25px;
          padding: 10px 0;
          text-align: center;
        }

        .canvasList {
          height: calc(~"100% - 25px");
          text-align: center;
        }
      }
    }

    .left1 {
      border-bottom: 1px solid #0d2451;
      background: #151456;
    }

    .title {
      position: absolute;
      display: inline-block;
      color: #6eddf1;
      border: 2px solid #6eddf1;
      height: 18px;
      padding: 0 2px;
      left: 50%;
      transform: translate(-50%, -50%);

      .title-text {
        position: relative;
        font-size: 16px;
        background: #09102e;
        display: inline-block;
        padding: 0 4px;
        transform: translateY(-5px);
      }
    }
  }

  .center-top {
    height: 60%;
  }

  .center-bottom {
    height: 40%;

    .bottom-radars {
      height: 55%;
    }

    .bottom-bars {
      height: 45%;
    }
  }

  .right-1 {
    height: 30%;

    .right1-1 {
      height: 92%;
    }
  }

  .right-2 {
    height: 40%;
  }
}
</style>
